<template>
<div class="home">
  <el-container>
  <el-header>
      后台管理系统
        <el-button class="button" type="info" plain @click="exit"
         >安全退出</el-button>
  </el-header>
  <el-container>
    <el-aside :width="isCollapse?'64px':'200px'">
        <div class="box" @click="hide">| | |</div>
         <el-col>
    <el-menu 
    :collapse-transition="false"
      default-active="2"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
      background-color="#373d3f"
      text-color="#fff"
      active-text-color="#3e9ed3">
      <el-submenu index="1">
        <template slot="title">
          <router-link to="/welcome"></router-link>
          <i class="el-icon-user-solid"></i>
          <span>用户管理</span>
        </template>
        <router-link to="/userManage" tag="span">
        <el-menu-item index="1">
       <i class="el-icon-menu"></i>用户列表
      </el-menu-item>
      </router-link>
      </el-submenu>
         <el-submenu index="9">
        <template slot="title">
          <i class="el-icon-s-home"></i>
          <span>权限管理</span>
        </template>
        <el-menu-item index="9">
        <i class="el-icon-menu"></i>
        <span slot="title">角色列表</span>
      </el-menu-item>
       <el-menu-item index="3">
        <i class="el-icon-menu"></i>
        <span slot="title">权限列表</span>
      </el-menu-item>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-shopping-bag-1"></i>
          <span>商品管理</span>
        </template>
        <el-menu-item index="4">
        <i class="el-icon-menu"></i>
        <span slot="title">商品列表</span>
      </el-menu-item>
       <el-menu-item index="5">
        <i class="el-icon-menu"></i>
        <span slot="title">分类参数</span>
      </el-menu-item>
       <el-menu-item index="6">
        <i class="el-icon-menu"></i>
        <span slot="title">商品分类</span>
      </el-menu-item>
      </el-submenu>
     <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-document"></i>
          <span>订单管理</span>
        </template>
        <el-menu-item index="7">
        <i class="el-icon-menu"></i>
        <span slot="title">订单列表</span>
      </el-menu-item>
      </el-submenu>
       <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-s-platform"></i>
          <span>数据统计</span>
        </template>
        <el-menu-item index="8">
        <i class="el-icon-menu"></i>
        <span slot="title">数据报表</span>
      </el-menu-item>
      </el-submenu>
    </el-menu>
  </el-col>
    </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</div>
</template>

<script>
export default {
    data(){
        return{
         isCollapse: false,
        }
    },
 methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
    hide(){
        this.isCollapse == false
        ? (this.isCollapse = true)
        : (this.isCollapse = false);
    },
    exit(){
       sessionStorage.removeItem("token");
        this.$router.push("/login");
          this.$notify({
          title: '成功',
          message: '已退出登录',
          type: 'success'
    })
    }
    },
   
}
</script>

<style scoped>

.home{
    height: 100%;
}

  .el-header{
    background-color:#333742;
    color: #E9EEF3;
    line-height: 60px;
    font-size: 22px;
    text-align: center;
  }
  
  .el-aside {
    background-color:#323743;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
.el-menu{
    height: 100%;
    text-align: left;
    border-right:none;
}
.box{
    width: 100%;
    height: 40px;
    background-color:#919398;
    display: block;
    line-height: 40px;
    color: aliceblue;
    cursor: pointer;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
.button{
  float: right;
  margin-top: 10px;
}


</style>